<template>
  <div class="main">
    <h2 class="user-title"><span>账号管理</span></h2>
    <div class="user-wrapper">
      <p class="header">基本信息</p>
      <div class="user-content">
        <div class="user-img">
          <el-upload
            class="avatar-uploader"
            :action="$api + '/pcUtils/uploadFile'"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :before-upload="beforeUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="avatar-uploader-icon">
              选 择 图 片<br>
              <span>支持png，jpg格式，小于2M的文件</span>
            </i>
          </el-upload>
          <el-button class="change-img" type="primary" @click="changeImg">保 存 头 像</el-button>
        </div>
        <div class="user-message">
          <p>企业名称：{{inforList.customerName || ''}}</p>
          <p>手机号码：{{inforList.mobile || ''}}</p>
          <div class="grade-name">{{inforList.gradeName}}</div>
        </div>
      </div>
      <p class="header header-password">修改密码</p>
      <div class="change-password">
         <el-form :model="psdFrom" label-width="80px" size="mini" label-position="top" :rules="accountRules"  ref="psdFrom" >
           <el-form-item label="当前密码" prop="oldPsw">
            <el-input type="password" v-model="psdFrom.oldPsw"></el-input>
          </el-form-item>
           <el-form-item label="新密码" prop="password">
            <el-input type="password" v-model="psdFrom.password" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="newPsw">
            <el-input type="password" v-model="psdFrom.newPsw"></el-input>
          </el-form-item>
          <el-button class="change-img" type="primary"  @click="save('psdFrom')">修改密码</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Md5 from 'js-md5'
export default {
  data () {
    return {
      imageUrl: '',
      psdFrom: {
        oldPsw: '',
        password: '',
        newPsw: ''
      },
      inforList: [],
      // 个人中心 账号管理
      accountRules: {
        oldPsw: [
          { required: true, message: '请输入当前密码', trigger: 'blur' }
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              if (value.length < 6) {
                callback(new Error('密码应不少于6个字符'))
              } else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{6,20}/.test(value)) {
                callback(new Error('密码必须由数字和字母组成'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }
        ],
        newPsw: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'))
              } else if (value !== this.psdFrom.password) {
                callback(new Error('两次输入密码不一致!'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              if (value.length < 6) {
                callback(new Error('密码应不少于6个字符'))
              } else if (!/^[0-9a-zA-z]+$/.test(value)) {
                callback(new Error('密码必须由数字和字母组成'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }
        ]
      }
    }
  },
  mounted () {
    this.getInfor()
  },
  methods: {
    // 获取基本信息
    getInfor () {
      this.$http.post(this.$api + '/pc/customer/identifier', {}).then(res => {
        if (res.responseCode === '0000') {
          this.inforList = res.data
          this.imageUrl = res.data.icon
        }
      }).catch(() => {
        this.$message.error({
          message: '请求超时！'
        })
      })
    },
    // 上传图片
    changeImg () {
      this.$http.post(this.$api + '/pc/customer/icon', {
        icon: this.imageUrl
      }).then(res => {
        if (res.responseCode === '0000') {
          this.getInfor()
          this.$message.success({
            message: res.responseMsg
          })
        } else {
          this.$message.error({
            message: res.responseMsg
          })
        }
      }).catch(() => {
        this.$message.error({
          message: '请求超时！'
        })
      })
    },
    // 修改密码
    save (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post(this.$api + '/pc/customer/modifypsw', {
            oldPsw: Md5(this.psdFrom.oldPsw),
            newPsw: Md5(this.psdFrom.newPsw)
          }).then(res => {
            if (res.responseCode === '0000') {
              this.$store.commit('user/setPCToken', '')
              this.$message.success({
                message: res.responseMsg,
                duration: this.$store.state.duration,
                onClose: () => {
                  this.$router.push('/login?redirect=' + this.$router.currentRoute.fullPath)
                }
              })
            } else {
              this.$message.error({
                message: res.responseMsg
              })
            }
          }).catch(() => {
            this.$message.error({
              message: '请求超时！'
            })
          })
        }
      })
    },
    // 检查图片大小不超过2M
    beforeUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    // 上传图片
    uploadSuccess (res, file) {
      this.imageUrl = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.user-content{
  padding-top: 25px;
  min-height: 250px;
  .user-img{
    float: left;
  }
  .user-message{
    color: $f_main;
    font-size: $fz_14;
    float: left;
    margin:10px 0 0 20px;
    p{
      margin-bottom: 8px;
    }
  }
}
.change-img {
    width: 150px;
    height: 32px;
    line-height: 9px;
    margin: 20px 0;
    }
.user-wrapper{
  .header-password{
    border-top: 1px solid $border_color;
  }
}
 .avatar-uploader {
  border: 1px solid $border_color;
  width: 148px;
  height: 148px;
 }
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 148px;
  }
  .avatar-uploader-icon {
    font-size: 14px;
    width: 148px;
    height: 148px;
    font-style: normal;
    padding-top: 45px;
    text-align: center;
    display: block;
    span{
      color: #8c939d;
      font-size: 12px;
      margin-top: 8px;
    }
    }
  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }
.change-password{
  padding:20px 0 42px 25px;
}
.el-input{
  width: 320px;
}
.el-form--label-top .el-form-item__label{
  padding: 0
}
.grade-name {
  display: inline-block;
  padding: 0 6px;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  color: #ffe198;
  background: #3b3e42 url(../../assets/images/grade-tag-bg.png) center no-repeat;
}
</style>
